<template>
  <div id="middle">

    <el-card shadow="hover">
      <router-link :to="{path: '/article/detail'}">
        <a class="article-list pr">
          <div class="left-img">
            <img src="http://imain.net/usr/uploads/2018/02/1254835428.png" height="100%" width="100%" alt="">
          </div>
          <div class="right-detail">
            <div class="_title">这是我的第一篇博客</div>
            <div class="_detail">从东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来</div>
            <div class="icon-group">
              <!-- 作者 -->
              <div class="icon user">
                <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
                <span>zeng</span>
              </div>

              <!-- 更新时间 -->
              <div class="icon time">
                <font-awesome-icon :icon="['far', 'clock']" class="fa-sm"></font-awesome-icon>
                <span style="letter-spacing: 1px">2018-04-25</span>
              </div>

              <!-- 热度 -->
              <div class="icon hot">
                <font-awesome-icon :icon="['fas', 'fire']" class="fa-sm"></font-awesome-icon>
                <span>2</span>
              </div>

              <!-- 围观次数 -->
              <div class="icon eye">
                <font-awesome-icon :icon="['fas', 'eye']" class="fa-sm"></font-awesome-icon>
                <span>200</span>
              </div>
            </div>
          </div>
          <div class="tag pa" style="text-align: center;font-size: 14px;line-height: 30px;border-radius: 5px 0 0 5px;color: #fff;right: 0;top: 10px;width: 70px;height: 30px;background: rgba(205,18,29,0.5)">
            置顶
          </div>
        </a>
      </router-link>
    </el-card>
    <el-card shadow="hover">
      <a href="#" class="article-list">
        <div class="left-img">
          <img src="http://imain.net/usr/uploads/2018/02/1254835428.png" height="100%" width="100%" alt="">
        </div>
        <div class="right-detail">
          <div class="_title">这是我的第一篇博客</div>
          <div class="_detail">从东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来东土大唐而来</div>
          <div class="icon-group">
            <!-- 作者 -->
            <div class="icon user">
              <font-awesome-icon :icon="['fas', 'user']" class="fa-sm"></font-awesome-icon>
              <span>zeng</span>
            </div>

            <!-- 更新时间 -->
            <div class="icon time">
              <font-awesome-icon :icon="['far', 'clock']" class="fa-sm"></font-awesome-icon>
              <span style="letter-spacing: 1px">2018-04-25</span>
            </div>

            <!-- 热度 -->
            <div class="icon hot">
              <font-awesome-icon :icon="['fas', 'fire']" class="fa-sm"></font-awesome-icon>
              <span>2</span>
            </div>

            <!-- 围观次数 -->
            <div class="icon eye">
              <font-awesome-icon :icon="['fas', 'eye']" class="fa-sm"></font-awesome-icon>
              <span>200</span>
            </div>
          </div>
        </div>
      </a>
    </el-card>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="page.currentPage"
      :page-size="page.pageSize"
      layout="prev, pager, next, jumper"
      :total="page.total" style="text-align: center;margin-bottom: 20px">
    </el-pagination>

  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue, Watch} from 'vue-property-decorator'
  import {
    State,
    Getter,
    Action,
    Mutation,
    namespace
  } from 'vuex-class'

  @Component
  export default class middle extends Vue {

    @Action('setUser') setUser;
    @Getter('getUser') getUser;

    page = {
      pageSize: 100,
      total: 1000,
      currentPage: 1
    };

    created() {
      console.log(!('name' in this.getUser))
      if (!('name' in this.getUser)) this.setUser({name: 'zengxiaochen'});
      console.log(this.getUser)
    }

    handleSizeChange(val) {
    };

    handleCurrentChange(val) {
      this.page.currentPage = val;
    }
  }
</script>

<style lang="scss">
  /*@import "../../assets/scss/common";*/
  @import "../../assets/scss/config";

  #middle {
    width: $middle-width;
    border-right: 1px solid #f2f2f2;

    .el-card__body {
      padding: 0;
    }

    .el-pager li.active, .el-pager li:hover {
      color: #409eff;
    }

    .el-card {
      margin: 10px;
    }

    .article-list {
      color: #000;
      &:hover {
        color: #000;
      }
      display: block;
      background: #fff;
      height: 130px;
      width: 100%;
      .right-detail {
        width: 560px;
        height: 100%;
        padding-left: 10px;
        ._title {
          /*font-weight: 600;*/
          font-size: 16px;
          padding: 15px 0;
          /*border-bottom: 1px solid;*/
        }
        ._detail {
          font-size: 13px;
          height: 50px;
        }

        .icon-group {
          border-top: 1px solid #f2f2f2;
          font-size: 12px;
          color: #888;
          .icon {
            margin-right: 30px;
            display: inline-block;
            transition: color .3s;
            &.user:hover {
              color: rgb(64, 158, 255);
            }
            &.time:hover {
              color: rgba(0, 0, 0, .8);
            }
            &.hot:hover {
              color: rgba(255, 0, 0, .6);
            }
            &.eye:hover {
              color: rgba(169, 227, 75, 1);
            }
          }
        }
      }
      .left-img {
        vertical-align: top;
        height: 100%;
        width: 200px;
        img {
          border-radius: 5px 0 0 5px;
        }
      }
      & > div {
        display: inline-block;
      }
    }
  }

</style>
